<template>
  <div class="wrap">
    <div class="search-row">
      <el-input class="keyword" placeholder="请输入搜索内容" v-model="searchWord" clearable>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button class="download" type="primary" @click="download">导出首贷户清单</el-button>
      <div class="row">
        <div class="date-desc">首贷户月份:</div>
        <el-date-picker
          format="yyyy年MM月"
          value-format="yyyy年MM月"
          v-model="month"
          type="month"
          placeholder="选择月"
          @change="refreshList"
        ></el-date-picker>
        <div class="org-desc">首贷银行:</div>
        <el-select v-model="orgList.selected" @change="refreshList" clearable placeholder="请选择">
          <el-option
            v-for="item of orgList.list"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          ></el-option>
        </el-select>
        <template v-if="month != null">
          <el-button class="download" type="danger" @click="deleteFirstLoanBath">清空{{month}}数据</el-button>
          <el-checkbox class="delete-result" v-model="deleteResult" label="删除校验结果" border></el-checkbox>
          <el-checkbox class="delete-base" v-model="deleteBase" label="删除数据库" border></el-checkbox>
        </template>
      </div>
    </div>
    <el-table :data="firstLoanTable" stripe style="width: 100%;">
      <el-table-column prop="reportDate" label="日期" width="100"></el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteFirstLoan(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="reportOrg" label="填报银行名称" width="120"></el-table-column>
      <el-table-column prop="firmName" label="企业名称" width="200"></el-table-column>
      <el-table-column prop="companyScale" label="大中小划分类型" width="100"></el-table-column>
      <el-table-column prop="industryCategory" label="行业分类" width="150"></el-table-column>
      <el-table-column prop="shareholderType" label="控股性质"></el-table-column>
      <el-table-column prop="creditBalance" label="授信金额" width="100"></el-table-column>
      <el-table-column prop="loanBalance" label="贷款余额" width="100"></el-table-column>
      <el-table-column prop="online" label="是否线上贷款" width="100"></el-table-column>
      <el-table-column prop="rate" label="利率" width="100"></el-table-column>
      <el-table-column prop="loanTermType" label="期限"></el-table-column>
      <el-table-column prop="guaranteeMethod" label="担保方式"></el-table-column>
      <el-table-column prop="firstLoanAreaCategory" label="贷款分县域" width="100"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalPage"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>
<script>
import {
  Table,
  TableColumn,
  Pagination,
  Input,
  DatePicker,
  Button,
  Select,
  Option,
  Checkbox
} from "element-ui";
import {
  getFirstLoanList,
  getAllFirstLoanOrgList,
  deleteFirstLoanById,
  downloadFirstLoan,
  deleteFirstLoanByMonth
} from "@/api/first-loan.js";

import { downloadFile } from "@/utils/download.js";
export default {
  name: "first-loan",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Input.name]: Input,
    [DatePicker.name]: DatePicker,
    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option,
    [Checkbox.name]: Checkbox
  },
  data() {
    return {
      firstLoanTable: [],
      pageNum: 1,
      pageSize: 10,
      totalPage: 0,
      searchWord: null,
      month: null,
      deleteBase: false,
      deleteResult: false,
      orgList: {
        selected: null,
        list: []
      }
    };
  },
  methods: {
    refreshList() {
      getFirstLoanList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        month: this.month,
        orgId: this.orgList.selected,
        searchWord: this.searchWord
      })
        .then(res => {
          this.firstLoanTable = res.list;
          this.totalPage = res.total;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    pageChange(page) {
      this.pageNum = page;
      this.refreshList();
    },
    download() {
      let downloading = this.$loading({
        fullscreen: true,
        text: "正在下载首贷户"
      });
      downloadFirstLoan({
        month: this.month,
        orgId: this.orgList.selected,
        searchWord: this.searchWord
      })
        .then(res => {
          downloadFile(res, window, this.$alert);
          downloading.close();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    deleteFirstLoan(index, row) {
      this.$confirm("此操作将永久删除该首贷户企业, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteFirstLoanById(row.id)
            .then(res => {
              this.refreshList();
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    deleteFirstLoanBath() {
      if (this.month == null) {
        return;
      }
      let tipMsg = `此操作将永久删除${this.month}首贷户`;

      this.$confirm(
        `此操作将永久删除${this.month}数据库、首贷户企业和校验结果, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          deleteFirstLoanByMonth({
            month: this.month,
            deleteResult: this.deleteResult,
            deleteBase: this.deleteBase
          }).then(res => {
            this.refreshList();
          }).catch(errMsg => this.$alert(errMsg));
        })
        .catch(() => {});
    }
  },
  watch: {
    searchWord() {
      this.pageNum = 1;
      this.refreshList();
    }
  },
  mounted() {
    this.refreshList();
    getAllFirstLoanOrgList()
      .then(res => {
        this.orgList.list = [];
        this.orgList.list.push({ orgId: -1, orgName: "全部" });
        res.forEach(item => this.orgList.list.push(item));
      })
      .catch(errMsg => this.$alert(errMsg.msg));
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  margin-left: 5px;

  .search-row {
    .keyword {
      width: 500px;
    }

    .download {
      margin-left: 5px;
    }

    .row {
      margin-top: 5px;

      .date-desc, .org-desc {
        font-size: 18px;
        display: inline-block;
        margin-right: 5px;
        background-color: #ccc;
        border-radius: 5px;
        cursor: default;
      }

      .org-desc {
        margin-left: 15px;
      }

      .delete-result {
        margin-left: 15px;
      }

      .delete-base {
        margin-left: -10px;
      }
    }
  }
}
</style>